
import { memo } from 'react'
import BannerModel from '@models/bannerModel'
import { Carousel } from 'antd-mobile';
import WImage from '@components/global/image'
// @ts-ignore
import Styles from './index.scss'

interface PropsInterface {
  models: BannerModel[]
}

const HomeBanner = (props: PropsInterface) => {

  return (
    <Carousel
      autoplay={true}
      infinite
      className={Styles['com-home-banner']}
      autoplayInterval={5000}
    >
      {props.models.map(val => (
        <WImage
          key={val._id}
          className={Styles['banner-item']}
          url={val.pic}
          width={400}
          height={260}
        >
          <>
            <p className={Styles.title}>
              {val.title}
            </p>
            <p className={`w-text-wrap ${Styles.detail}`}>
              {val.detail}
            </p>
          </>
        </WImage>
      ))}
    </Carousel>
  )
}

export default memo(HomeBanner)